<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/detail.css">
    <!-- 使用Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        /* 自定义提示框样式 */
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 20px;
            border-radius: 4px;
            color: white;
            font-weight: bold;
            display: flex;
            align-items: center;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            z-index: 1000;
            transform: translateX(150%);
            transition: transform 0.4s ease-in-out;
        }
        .notification.show {
            transform: translateX(0);
        }
        .notification i {
            margin-right: 10px;
            font-size: 20px;
        }
        .notification.success {
            background-color: #4CAF50;
        }
        .notification.error {
            background-color: #f44336;
        }
    </style>
</head>

<body>
    <div class="nav">
        <img src="pic/logo2.jpg" alt="">
        <span class="blog-title">我的博客系统</span>
        <div class="space"></div>
        <a class="nav-span" href="blog_list.html"><i class="fas fa-home"></i> 主页</a>
        <a class="nav-span" href="blog_edit.html"><i class="fas fa-edit"></i> 写博客</a>
        <a class="nav-span" href="#" onclick="logout()"><i class="fas fa-sign-out-alt"></i> 注销</a>
    </div>

    <div class="container">
        <div class="left">
            <div class="card">
                <img src="pic/doge.jpg" alt="">
                <h3>比特汤老师</h3>
                <a href="#" target="_blank"><i class="fab fa-github"></i> GitHub 地址</a>
                <div class="stats">
                    <div class="stat-item">
                        <div class="stat-value">2</div>
                        <div class="stat-label">文章</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">1</div>
                        <div class="stat-label">分类</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="content">
                <div class="article-header">
                    <div class="back-link">
                        <a href="blog_list.html"><i class="fas fa-arrow-left"></i> 返回列表</a>
                    </div>
                    <div class="title"></div>
                    <div class="date"><i class="far fa-calendar-alt"></i> <span></span></div>
                </div>
                <div class="detail-container">
                    <div class="detail" id="detail" style="background-color: transparent;">
                        <!-- 加载界面已移除 -->
                    </div>
                    <div id = "button">
                        <button class="edit-btn" onclick="window.location.href='blog_update.html' + location.search"><i class="fas fa-pen"></i> 编辑</button>
                        <button class="delete-btn" onclick="confirmDelete()"><i class="fas fa-trash-alt"></i> 删除</button>
                    </div>
                </div>
                <div id="article-actions">
                    <!-- 操作按钮将通过JavaScript动态加载 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 提示框组件 -->
    <div id="notification" class="notification">
        <i id="notificationIcon" class="fas"></i>
        <span id="notificationMessage"></span>
    </div>

    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="blog-editormd/css/editormd.css" />
    <script src="js/jquery.min.js"></script>
    <script src="blog-editormd/lib/marked.min.js"></script>
    <script src="blog-editormd/lib/prettify.min.js"></script>
    <script src="blog-editormd/editormd.js"></script>
    <script src="js/common.js"></script>
    <script>
        $(document).ready(function() {
            //显示博客作者信息
            var userUrl = "/user/getAuthorInfo" + location.search;
            getUserInfo(userUrl);
            
            loadBlogDetail();
        });
        
        // 显示提示框
        function showNotification(message, type) {
            const notification = document.getElementById('notification');
            const icon = document.getElementById('notificationIcon');
            const messageElement = document.getElementById('notificationMessage');
            
            // 设置消息和图标
            messageElement.textContent = message;
            
            // 根据类型设置样式
            notification.className = 'notification';
            if (type === 'success') {
                notification.classList.add('success');
                icon.className = 'fas fa-check-circle';
            } else {
                notification.classList.add('error');
                icon.className = 'fas fa-exclamation-circle';
            }
            
            // 显示提示框
            setTimeout(() => {
                notification.classList.add('show');
            }, 10);
            
            // 3秒后隐藏
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }
        
        function loadBlogDetail() {
            $.ajax({
                type: "get",
                url: "/blog/getBlogDetail" + location.search,
                success: function (result) {
                    if (result.code == 200 && result.data != null) {
                        $(".title").text(result.data.title);
                        $(".date span").text(result.data.createTime);
                        
                        // 使用Markdown渲染内容
                        editormd.markdownToHTML("detail", {
                            markdown: result.data.content,
                            htmlDecode: "style,script,iframe",
                            tocm: true,
                            emoji: true,
                            taskList: true,
                            tex: true,
                            flowChart: true,
                            sequenceDiagram: true
                        });
                        
                        // 不再需要移除加载提示的代码
                        
                        //显示更新删除按钮
                        var loginUserId = localStorage.getItem("loginUserId");
                        console.log("1111111111111");
                        if (result.data.userId == loginUserId) {
                            console.log("22222222222222222222");
                            var html = '<div class="operating">';
                            html += '<button class="edit-btn" onclick="window.location.href=\'blog_update.html' + location.search + '\'"><i class="fas fa-pen"></i> 编辑</button>';
                            html += '<button class="delete-btn" onclick="confirmDelete()"><i class="fas fa-trash-alt"></i> 删除</button>';
                            html += '</div>';
                            $("#article-actions").html(html);
                        }
                    } else {
                        $(".detail").html('<div class="error-message"><i class="fas fa-exclamation-triangle"></i><p>文章加载失败</p></div>');
                    }
                },
                error: function(err) {
                    console.error("获取博客详情失败:", err);
                    $(".detail").html('<div class="error-message"><i class="fas fa-exclamation-triangle"></i><p>文章加载失败，请刷新页面重试</p></div>');
                }
            });
        }

        function confirmDelete() {
            if(confirm("确定要删除这篇文章吗？此操作不可撤销。")) {
                deleteBlog();
            }
        }
        
        function deleteBlog() {
            $.ajax({
                type: "post",
                url: "/blog/delete" + location.search,
                success: function (result) {
                    if (result != null && result.code == 200 && result.data) {
                        showNotification("文章删除成功，即将返回列表页", "success");
                        setTimeout(function() {
                            location.href = "blog_list.html";
                        }, 2000);
                    } else {
                        showNotification(result.msg || "删除失败", "error");
                    }
                },
                error: function(err) {
                    console.error("删除博客失败:", err);
                    showNotification("删除失败，请重试", "error");
                }
            });
        }
    </script>
</body>

</html>